<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>this is page1</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<h1>hello page1!</h1>

<img src="/kap" id="kaptchaImage">

<form action="/hello/code">

    <input name="kap" >

    <input type="submit">

</form>
<script type="text/javascript">
    $('#kaptchaImage').click(function() {$(this).attr('src','/kap?' + Math.floor(Math.random() * 100));});



    $(function () {
        const url = '/hello/map';

        $.get(url, data =>{
            const r = Object.entries(data).sort(
                ([x1, x2], [y1, y2])=>
                    x2.reduce((x, {grade}) => x + grade, 0)
                    -
                    y2.reduce((x, {grade}) => x + grade, 0)
            );

            console.log(r);


        });


    });
</script>
</body>
</html>
